<template>
    <div class="dashboard-container">
        <tool :get="queryFn" :selectionVideo="currentSelection" ref="attentionTool" :formFilter="formFilter" @clear="clearForm" :pagination="pagination"></tool>
        <tableList v-loading="loading" :tableData="tableData" @attention="attentionFn" @select="selectList"></tableList>
        <div class="pagination">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pagination.pageIndex"
                    :page-sizes="[20, 50, 100, 200]"
                    :page-size="pagination.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="pagination.total">
            </el-pagination>
        </div>
        <el-row :gutter="20">
            <el-col :span="12">
                <el-divider contentPosition="left">私信内容</el-divider>
                <el-form label-width="100px">
                    <el-form-item label="发送类型">
                        <el-select v-model="formFilter.commentType" placeholder="类型">
                            <el-option
                                    v-for="(item, key) in typeKv"
                                    :key="key"
                                    :label="item"
                                    :value="key">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="循环次数">
                        <el-input style="width: 80px;" v-model="formFilter.count"></el-input>
                        当前：{{taskObj.overCnt || 0}}
                    </el-form-item>
                    <el-form-item label="每轮间隔">
                        <el-input style="width: 80px;" v-model="formFilter.integer"></el-input>
                        <!--                        &#45;&#45;-->
                        <!--                        <el-input style="width: 80px;"></el-input>-->
                    </el-form-item>
                    <el-form-item label="">
                        <el-checkbox v-model="formFilter.automaticComment" :true-label='1' :false-label="0">检测涨粉是否回复</el-checkbox>
                    </el-form-item>
                    <el-form-item label="发送内容" v-if="formFilter.commentType != 20">
                        <el-input type="textarea" :rows="3" v-model="formFilter.content"></el-input>
                    </el-form-item>
                    <el-form-item label="标题" v-if="formFilter.commentType == 20">
                        <el-input v-model="formFilter.title" placeholder="请输入标题"></el-input>
                    </el-form-item>
                    <el-form-item label="地址" v-if="formFilter.commentType == 20">
                        <el-input v-model="formFilter.url" placeholder="请输入地址"></el-input>
                    </el-form-item>
                    <el-form-item label="描述" v-if="formFilter.commentType == 20">
                        <el-input v-model="formFilter.desc" placeholder="请输入描述"></el-input>
                    </el-form-item>
                    <el-form-item label="图片地址" v-if="formFilter.commentType == 20">
                        <el-input v-model="formFilter.image" placeholder="请输入图片地址"></el-input>
                    </el-form-item>
                    <el-form-item label="本轮">
                        发送成功:{{taskObj.overCnt || 0}} 发送失败{{0}}
                    </el-form-item>
                    <el-form-item>
                        <el-button type="success" icon='el-icon-video-play' @click="startAttention('')" :loading="btnLoading">开始</el-button>
                        <el-button type="success" icon='el-icon-video-pause' @click="stop" :disabled="Boolean(!btnLoading)">暂停</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
            <el-col :span="12">
                <el-divider contentPosition="left">状态</el-divider>
                <div style="text-align: right; margin-bottom: 10px;">
                    <el-button size="mini" @click="clearLogs">清空日志</el-button>
                </div>
                <div class="task-list">
                    <div v-for="(i, index) in listData" :key="index" class="text item">
                        {{`${i}` }}
                    </div>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
  import tool from './tool'
  import tableList from './tableList'
  import { getList } from '@/api/private-letter'
  import { startAttention, stop, getTaskProcessMessage } from '@/api/attention'

  export default {
    name: 'attention',
    components: {
      tool,
      tableList
    },
    data () {
      return {
        typeKv: {
          [10]: '文本',
          [20]: '名片',
          [30]: '转发视频',
        },
        tableData: [],
        pagination: {
          pageIndex: 1,
          pageSize: 20,
          total: 0,
          nickName: ''
        },
        formFilter: {
          // "videoUrlVal": '',
          "accounts": [],
          "ainterval": '',
          "cinterval": '',
          "commentType": '10',
          "content": '',
          "count": '',
          "limitFlag": '',
          "automaticComment": 0,
          "type": 50,
          "title": '',
          "url": '',
          "desc": '',
          "image": '',
          "videoUrl": []
        },
        loading: false,
        btnLoading: false,
        currentSelection: [], //选中视频列表
        timer: null,
        taskId: '',
        taskObj: {}
      }
    },
    computed : {
      listData() {
        let arr = []
        if(this.$store.state.user.taskList.length) {
          arr = this.$store.state.user.taskList.filter(item => item.taskType == 50)
          arr = arr.map(item => item.message)
        }
        return arr
      }
    },
    methods: {
      handleSizeChange (val) {
        this.pagination.pageSize = val
        this.get()
      },
      handleCurrentChange (val) {
        this.pagination.pageIndex = val
        this.get()
      },
      queryFn () {
        this.pagination.pageIndex = 1
        this.get()
      },
      async get () {
        try {
          this.loading = true
          const params = {
            ...this.pagination
          }
          delete params.date
          delete params.total
          const response = await getList(params)
          this.tableData = response.data
          this.pagination.total = response.total
          this.loading = false
        } catch (e) {
          this.loading = false
          console.log(e)
        }
      },
      async attentionFn (val) {
        this.startAttention(val.userId)
      },
      selectList (val) {
        this.currentSelection = val;
      },
      clearLogs () {
        this.$store.dispatch('user/clearTaskList', 50)//todo 私信状态
      },
      async startAttention (url) {
        try {
          const allSelection = this.$store.state.user.allSelection
          const currentSelection = this.$store.state.user.currentSelection
          if(url) {
            this.formFilter.videoUrl  = [url]
          } else {
            this.formFilter.videoUrl  = this.currentSelection.map(i => i.userId)
          }
          if(allSelection.length === currentSelection.length) {
            this.formFilter.accounts = ['-1']
          } else {
            if(!currentSelection.length) {
              this.$message.warning('没有选择用户')
              return
            }
            this.formFilter.accounts  = currentSelection.map(i => i.phone)
          }
          const params = {...this.formFilter}
          // delete params.videoUrlVal
          const {data} = await startAttention(params)
          console.log(data.taskId)
          this.taskId = data.taskId
          this.btnLoading = true
          this.$message.success('开始私信')
          this.getTaskProcessMessage()
        } catch (e) {
          console.log(e)
        }
      },
      async stop () {
        try {
          if(!this.taskId) {
            this.$message.warning('没有开始私信')
          }
          const params = {
            "taskId": this.taskId,
            "taskType": 50
          }
          const {data} = await stop(params)
          this.$message.success('停止私信成功')
          this.btnLoading = false
          this.taskId = ''
        } catch (e) {
          console.log(e)
        }
      },
      async getTaskProcessMessage() {
        try {
          const params = {
            "taskId": this.taskId,
            "type": 50
          }
          const {data} = await getTaskProcessMessage(params)
          this.taskObj = data
          const num = data.totalCnt - data.overCnt
          if(num <= 0) {
            this.$message.success('私信结束')
            // this.stop()
            clearTimeout(this.timer)
            this.btnLoading = false
            return
          }
          this.timer = setTimeout(() => {
            this.getTaskProcessMessage()
          }, 5000)
        }catch (e) {
          this.btnLoading = false
          console.log(e)
        }
      },
      clearForm () {
        this.formFilter = {
          // "videoUrlVal": '',
          "accounts": [],
          "ainterval": '',
          "cinterval": '',
          "commentType": '10',
          "content": '',
          "count": '',
          "limitFlag": '',
          "automaticComment": 0,
          "type": 50,
          "title": '',
          "url": '',
          "desc": '',
          "image": '',
          "videoUrl": []
        }
      }
    },
    mounted () {
      this.get()
    },
    destroyed () {
      clearTimeout(this.timer)
    }
  }
</script>

<style lang="scss" scoped>



</style>
